{% extends "H5GameBundle::base.html.twig" %}

{% block inlineStyles %}
    <style type="text/css">
        a.libao_a{ display:inline-block; width:40px; height:18px; line-height:18px; border:1px solid #70abfa; background-color:#edf6f9; color:#70abfa; font-size:12px; border-radius:5px; text-align:center; margin-left:10px; vertical-align:middle}
        #sw2 span a {position: relative; float: left}
    </style>
{% endblock %}

{% block pageContent %}
    <div class="toptiaodiv01 pr">游戏
        <a href="javascript:history.go(-1);" class="topjt_a db pa"><img src="/assets/h5game/images/toparrow.png" /></a>
        <a href="http://h5.49you.com/search.html" class="userc_a01 db pa"><img src="/assets/h5game/images/sbtn2.png" /></a>
    </div>
    <div class="gftjwrap_div0">
        <ul class="jjtop_ul">
            <li>
                <div class="jianjietopicon fl pr"><a href="jianjie.html"><img src="{{ h5game.cover }}" /></a></div>
                <div class="jjinfo_div fl">
                    <p class="gftjyxname">{{ h5game.name }}<a href="http://zhuanti.49you.com/h5libao?id=94" class="libao_a">礼包</a></p>
                    <p class="gftjyxinfo_p"><img src="/assets/h5game/images/star{{ h5game.score }}.png" /> &nbsp;人气：1000</p>
                    <p class="gftjyxinfo_p2">{{ h5game.intro| striptags| slice(0, 10) | raw }}...</p>
                </div>
            </li>
        </ul>
        <div class="jjscdiv">
            <span class="jsc_span"><input type="checkbox" id="jsc" /> <label for="jsc">添加收藏</label></span>
            <a href="javascript:void(0);" class="jjstart_a"><img src="/assets/h5game/images/startarrow01.png" /> 开始游戏</a>
            <a href="javascript:void(0);" class="zan_a"><img src="/assets/h5game/images/hearticon.png" /> <span id="dz">0</span></a>
        </div>
    </div>
    <div class="gftjwrap_div0">
        <!--banner2 start-->
        <div class="bannar2">
            <div id="slider2" class="swipe" style="padding-bottom:0px;">
                <div class="swipe-wrap" id="sw2">
                    {% for k1, img1 in h5game.printScreen %}
                        {% if k1%2==0 %}
                            <span>
                                <a href="javascript:void(0);"><img class="lazyimg" src="about:blank" data-original="{{ img1 }}" /></a>
                                {% for k2, img2 in h5game.printScreen %}
                                    {% if k2==k1+1 %}
                                        <a href="javascript:void(0);" style="margin-right:0;"><img class="lazyimg" src="about:blank" data-original="{{ img2 }}" /></a>
                                    {% endif %}
                                {% endfor %}
                            </span>
                        {% endif %}
                    {% endfor %}
                    </span>
                </div>
                <div class="swipe-bar2 dn"><span class="current"></span><span style="margin-right:0"></span></div>
            </div>
        </div>
        <!--banner2 end-->
    </div>
    <div class="gftjwrap_div0">
        <div class="yxjjtop_div box_orient">
            <span class="yxjjhead db jjlef selected">介绍</span><span class="yxjjhead db jjright">玩法</span>
        </div>
        <div id="tab-content">
            <div>
                <!--p class="jjtitle_p">游戏介绍</p-->
                <div class="jjcon_div">{{ h5game.intro | raw }}</div>
            </div>
            <div class="hide">
                <!--p class="jjtitle_p">游戏玩法</p-->
                <div class="jjcon_div">{{ h5game.play | raw }}</div>
        </div>
    </div>
    <div class="gftjwrap_div00">
        <div class="gftjhead_p pr" style="border-bottom:none;">游戏分享</div>
        <ul class="yxfxpic_ul">
            <li>
                <a href="javascript:;" name="0"><img src="/assets/h5game/images/wxicon.jpg" /></a>
                <p>微信好友</p>
            </li>
            <li>
                <a href="javascript:;" name="1"><img src="/assets/h5game/images/qqkjicon.jpg" /></a>
                <p>QQ空间</p>
            </li>
            <li>
                <a href="javascript:;" name="2"><img src="/assets/h5game/images/weiboicon.jpg" /></a>
                <p>新浪微博</p>
            </li>
            <li style="margin-right:0">
                <a href="javascript:;" name="3"><img src="/assets/h5game/images/renrenicon.jpg" /></a>
                <p>人人网</p>
            </li>
        </ul>
    </div>
    <div class="gftjwrap_div00" style="margin-bottom:18%;">
        <div class="gftjhead_p pr" style="border-bottom:none;">相关游戏</div>
        <ul class="gftjpic_ul01">
            {% for item in others %}
            <li>
                <a href="{{ url("yearnfar_h5game_game_info", {"gid": item.id}) }}"><img src="{{ item.cover }}" /></a>
                <p>{{ item.name }}</p>
            </li>
            {% endfor %}
        </ul>
    </div>

    <div id="share" style="display: none">
        <img width=100% src="/assets/h5game/images/share.png" style="position: fixed; z-index: 9999; top: 0; left: 0; display: " />
    </div>

{% endblock %}



{% block pluginScripts %}
    <script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>
    <script src="/assets/h5game/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="/assets/h5game/js/rrshare.js"></script>
{% endblock %}

{% block inlineScripts %}
<script type="text/javascript">
    $(function() {

    //第二个幻灯片
        var items2 = Array.prototype.slice.call(document.querySelectorAll('.swipe-bar2 span'));
        var s = new Swipe(document.getElementById('slider2'), {
            startSlide: 0,
            speed: 500,
            auto: 3500,
            continuous: true,
            disableScroll: false,
            stopPropagation: false,
            callback: function(index, elem) {
                items2.forEach(function(e, i) {
                    e.className = (index % 2) == i ? 'current' : '';
                });
            },
            transitionEnd: function(index, elem) {}
        });
        var imgElems2 = Array.prototype.slice.call(document.querySelectorAll(".lazyimg")), url;
        imgElems2.forEach(function(e, i) {
            url = e.getAttribute("data-original");
            if (url) e.src = url;
        });

    });

    var api = "http://api.49you.com";
    var gameName = "萌战姬";
    var game_brief = "《萌战姬》是由重庆火缘步甲科技公司开发，科幻风格的HTM5萌妹子飞行STG手游，简单上手的系统、爽快的射击，丰富的剧情对话，性格分明的拟人战姬，精美的立绘，丰富的敌人，多样的僚机搭配可以供你自由选择。";
    var loginStatus = false;
    var myUrl = location.href;
    //判断登陆状态
    $(function()
    {
        $.getJSON(api + "/User/Login/checkLogin?rnd=" + Math.random() + "&platformid=9&format=json&jsoncallback=?",
                function(data)
                {
                    if (data.status == 1)
                    {
                        loginStatus = true;
                        var user = data.user;
                        $.getJSON(api + "/api/Html5/getMyLike?rnd=" + Math.random() + "&platformid=9&member_name="+user.username+"&game_id=94&format=json&jsoncallback=?",
                                function(data)
                                {
                                    if(data.mh_sc == 1)
                                    {
                                        $('#jsc').attr('checked',true);
                                    }else{
                                        $('#jsc').attr('checked',false);
                                    }
                                    if(data.mh_dz!=0)
                                    {
                                        $('#dz').html(data.mh_dz);
                                    }
                                });
                    }
                });

        $("#jsc").change(function(){
            if(loginStatus){
                var jsc = $('#jsc').attr('checked');
                if(jsc=="checked"){
                    //添加收藏
                    $.getJSON(api + "/api/Html5/addhome?rnd=" + Math.random() + "&platformid=9&game_id=94&format=json&jsoncallback=?",
                            function(data)
                            {
                                if (data.status == 1)
                                {
                                    alert("收藏成功！");
                                }
                            });
                }else{
                    //取消收藏
                    $.getJSON(api + "/api/Html5/cancelhome?rnd=" + Math.random() + "&platformid=9&game_id=94&format=json&jsoncallback=?",
                            function(data)
                            {
                                if (data.status == 1)
                                {
                                    alert("取消成功！");
                                }
                            });
                }
            }
        });


        $('.yxfxpic_ul a').click(function()
        {
            var code = $(this).attr('name');
            switch(code)
            {
                case '0':
                    $('#share').show();
                    break;
                case '1':
                    var p =
                    {
                        url:myUrl,
                        showcount:'1',/*是否显示分享总数,显示：'1'，不显示：'0' */
                        desc:'四九游H5游戏－' + game_brief,/*默认分享理由(可选)*/
                        summary:'',/*分享摘要(可选)*/
                        title:'四九游H5游戏－' + gameName,/*分享标题(可选)*/
                        site:'',/*分享来源 如：腾讯网(可选)*/
                        pics:'/assets/h5game/images/logo.jpg', /*分享图片的路径(可选)*/
                        style:'201',
                        width:113,
                        height:39
                    };
                    var s = [];
                    for(var i in p)
                    {
                        s.push(i + '=' + encodeURIComponent(p[i]||''));
                    }
                    window.location.href='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'+s.join('&');
                    break;
                case '2':
                    var p =
                    {
                        url:myUrl,
                        source:'bookmark',
                        title:'四九游H5游戏－' + gameName,/*分享标题(可选)*/
                    };
                    var s = [];
                    for(var i in p)
                    {
                        s.push(i + '=' + encodeURIComponent(p[i]||''));
                    }
                    window.location.href='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'+s.join('&');
                    break;
                case '3':
                    var rrShareParam = {
                        resourceUrl : myUrl,	//分享的资源Url
                        srcUrl : myUrl,	//分享的资源来源Url,默认为header中的Referer,如果分享失败可以调整此值为resourceUrl试试
                        pic : '/assets/h5game/images/logo.jpg',		//分享的主题图片Url
                        title : '四九游H5游戏－' + gameName,		//分享的标题
                        description : '四九游H5游戏－' + game_brief	//分享的详细描述
                    };
                    rrShareOnclick(rrShareParam);
                    break;
                default:
                    break;
            }
        });
        $('#share').click(function()
        {
            $('#share').hide();
        });
    });

    var game_class = "10";
    $(document).ready(function(){

        $('.yxjjtop_div span').click(function(){
            $(this).addClass("selected").siblings().removeClass("selected");
            $("#tab-content > div").hide().eq($('.yxjjtop_div span').index(this)).show();
        });

        var t = 0;
        $('.zan_a').click(function(){
            t = t + 1;
            $('.zan_a span').text(t);
        });
        $('.jjstart_a').click(function() {
            var item = $.cookie("item");//获取item的值
            var jsc = $.cookie("jsc");//获取item的值
            if(item)
            {
                $.cookie("item",item + ',' +game_class,{expires: 7, path: '/' ,domain:'49you.com'});
            }
            else
            {
                $.cookie("item",game_class,{expires: 7, path: '/' ,domain:'49you.com'});
            }
            var sc = $('#jsc').val();
            if(sc)
            {
                if(jsc)
                {
                    $.cookie("jsc",jsc + ',' +game_class,{expires: 7, path: '/' ,domain:'49you.com'});
                }
                else
                {
                    $.cookie("jsc",game_class,{expires: 7, path: '/' ,domain:'49you.com'});
                }
            }

            window.location.href="{{ h5game.link }}";
        });

        var mylike = $.cookie("mylike");//获取likes的值
        $('.zan_a').click(function()
        {
            if(mylike)
            {
                $.cookie("mylike",mylike + ',' +game_class,{expires: 7, path: '/' ,domain:'49you.com'});
            }
            else
            {
                $.cookie("mylike",game_class,{expires: 7, path: '/' ,domain:'49you.com'});
                $(this).find('span').html(1);
            }
        });
        if(mylike)
        {
            $('.zan_a').find('span').html(1);
        }
    });

    $(function()
    {
        var targetUrl=location.href;
        $.ajax(
                {
                    type : "post",
                    url  : "http://api.49you.com/api/Html5/getWinXin",
                    data : {'targetUrl':targetUrl},
                    async: false,
                    cache:false,
                    dataType : 'jsonp',
                    jsonp: "jsoncallback",//服务端用于接收callback调用的function名的参数
                    success : function(data)
                    {
                        wx.config({
                            debug: false,
                            appId: data.appId,
                            timestamp: data.timestamp,
                            nonceStr: data.nonceStr,
                            signature: data.signature,
                            jsApiList: [
                                // 所有要调用的 API 都要加到这个列表中
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                            ]
                        });
                        wx.ready(function () {
                            var title = '四九游H5游戏－' + "萌战姬";
                            var desc = '四九游H5游戏－' + "《萌战姬》是由重庆火缘步甲科技公司开发，科幻风格的HTM5萌妹子飞行STG手游，简单上手的系统、爽快的射击，丰富的剧情对话，性格分明的拟人战姬，精美的立绘，丰富的敌人，多样的僚机搭配可以供你自由选择。";
                            var link = 'http://gameh5.49you.com/'+"mzj"+'/info.html';
                            var imgUrl = 'http://imgh5.49you.com/game/'+"94"+'/assets/h5game/images/86_86.jpg';
                            wx.onMenuShareAppMessage(
                                    {
                                        title: title,
                                        desc: desc,
                                        link: link,
                                        imgUrl: imgUrl
                                    });
                            wx.onMenuShareTimeline(
                                    {
                                        title: title,
                                        desc: desc,
                                        link: link,
                                        imgUrl: imgUrl
                                    });
                        });
                    }
                });
    });
</script>
{% endblock %}
